<template>
  <div class="musicBox">
    <div class="detailLeft">
      <Introduce
        v-if="detailObj"
        :detailObj="detailObj"
        :lyric="lyric"
        :commentTotal="commentTotal"
      />
      <Comment
        ref="comment"
        v-if="commentObj"
        :resourcesId="parseInt($route.query.id)"
        :resourcesType="0"
        :commentObj="commentObj"
        @getComment="getComment"
      />
    </div>
    <div class="detailRight">
      <RightDom ref="rightDom" />
    </div>
  </div>
</template>

<script>
import Introduce from "@/views/MusicDetail/introduce.vue";
import RightDom from "@/views/MusicDetail/rightDom.vue";
import Comment from "@/components/comment";
import { musicDetail, musicComment, getLyric } from "@/api";
export default {
  data() {
    return {
      detailObj: "",
      lyric: "",
      commentObj: "",
      commentTotal: 0,
    };
  },
  created() {
    this.getMusicDetail();
    this.getLyricFn();
    this.getComment();
  },
  components: {
    Introduce,
    Comment,
    RightDom,
  },
  methods: {
    //音乐详情
    getMusicDetail() {
      musicDetail({ ids: this.$route.query.id }).then((res) => {
        this.detailObj = res.songs[0];
        // console.log(this.detailObj);
      });
    },
    //歌词
    getLyricFn() {
      getLyric({ id: this.$route.query.id }).then((res) => {
        this.lyric = res;
      });
    },
    //获取评论
    getComment(pageNum) {
      musicComment({
        id: this.$route.query.id,
        limit: 20,
        offset: ((pageNum || 1) - 1) * 20,
        timestamp: new Date().valueOf(),
      }).then((res) => {
        if (res.code == 200) {
          this.commentObj = res;
          this.commentTotal = res.total;
        }
      });
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.$refs.comment.contnetPage = 1;
    this.getMusicDetail();
    this.getLyricFn();
    this.getComment();
    this.$refs.rightDom.getBeSimilarMusic();
    this.$refs.rightDom.getDeSimilarSongSheet();
  },
};
</script>

<style lang="scss" scoped>
.musicBox {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  display: flex;
  .detailLeft {
    flex: 1;
    border-right: 1px solid #d3d3d3;
    padding: 47px 30px 40px 39px;
    box-sizing: content-box;
    overflow: hidden;
  }
  .detailRight {
    width: 270px;
  }
}
</style>